<template>
  <!--  <el-dialog v-model="visible" :title="!dataForm.imei ? '新增' : '修改'" :close-on-click-modal="false">-->
  <ElForm ref="dataFormRef" :model="model" :rules="dataRules" label-width="100px">
    <div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="设备imei" prop="imei">
            <el-select
              v-model="model.imei"
              filterable
              allow-create
              remote
              :remote-method="remoteMethod"
              :loading="inputLoading"
              placeholder="请选择"
              @change="imeiChange">
              <el-option v-for="item in imeiList" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item prop="status" label="是否可用">
            <el-checkbox v-model="model.status" :true-value="1" :false-label="0"></el-checkbox>
          </el-form-item>
          <el-form-item prop="canLogin" label="允许登录">
            <el-checkbox v-model="model.canLogin"></el-checkbox>
          </el-form-item>
          <!--          <el-form-item label="设备序号" prop="imei">-->
          <!--            <el-input v-model="props.data.imei" placeholder="设备唯一编号"></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item label="自定义编号" prop="devNo">
            <el-input v-model="model.devNo" placeholder="设备自定义编号"></el-input>
          </el-form-item>
          <el-form-item label="司机名字" prop="driverName">
            <el-input v-model="model.driverName" placeholder="司机名字"></el-input>
          </el-form-item>
          <el-form-item label="SIM" prop="sim">
            <el-input v-model="model.sim" placeholder="SIM"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="deviceType" label="所属分组">
            <el-select v-model="model.groupId" placeholder="请选择设备类型">
              <el-option v-for="item in equipmentList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>

          <el-form-item label="图标" prop="icon">
            <el-input v-model="model.icon" placeholder="图标"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="password">
            <el-input v-model="model.password" placeholder="登录密码"></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="plateNo">
            <el-input v-model="model.plateNo" placeholder="设备名称"></el-input>
          </el-form-item>
          <el-form-item label="司机手机号" prop="driverPhone">
            <el-input v-model="model.driverPhone" placeholder="司机手机号"></el-input>
          </el-form-item>
          <el-form-item label="ICCID" prop="iccid">
            <el-input v-model="model.iccid" placeholder="ICCID"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备类型" prop="productId">
            <el-select v-model="model.productId" placeholder="请选择设备类型">
              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.deviceDesc" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建日期" prop="platformStartDate">
            <el-date-picker
                v-model="model.platformStartDate"
                disabled
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="创建日期" />
          </el-form-item>
          <el-form-item label="过期日期" prop="platformEndDate">
            <el-date-picker
              v-model="model.platformEndDate"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="过期日期" />
          </el-form-item>
          <el-form-item label="车辆Vin" prop="carVin">
            <el-input v-model="model.carVin" placeholder="车辆Vin"></el-input>
          </el-form-item>
          <el-form-item label=" "></el-form-item>
          <el-form-item prop="lockSim" label="锁定SIM卡">
            <el-checkbox v-model="model.lockSim"></el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="自定义备注" prop="remark">
        <el-input v-model="model.remark" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
      </el-form-item>
    </div>
  </ElForm>
  <el-table :data="dataList" border class="layout-table">
    <el-table-column prop="id" label="通道" header-align="center" align="center" width="100"></el-table-column>
    <el-table-column prop="" label="名称" header-align="center" align="center">
      <template #default="scope">
        <el-input v-model="scope.row.name" placeholder="自定义"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="canLogin" label="是否启用" header-align="center" align="center">
      <template #default="scope">
        <el-radio-group v-model="scope.row.enlbe">
          <el-radio :value="1">启用</el-radio>
          <el-radio :value="0">禁用</el-radio>
        </el-radio-group>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  ElCheckbox,
  ElCol,
  ElDatePicker,
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElOption,
  ElRadio,
  ElRadioGroup,
  ElRow,
  ElSelect,
  ElSwitch,
  ElTable,
  ElTableColumn
} from 'element-plus'
import MaOrgtSelect from '../../ma-org/ma-org-select/index.vue'
import { getdeviceGroupingApi, useSearchImeiApi } from '@/api/gps/device'
import { getProductByUser } from '@/api/gps/product'
import { getimeiInfoApi } from '@/api/gps/gps'
const emits = defineEmits(['updateValue'])
const model = defineModel<any>()
const imeiList = ref<any[]>([])
const dataFormRef = ref()
const dataList = ref<any[]>([])
const deviceTypeList = ref()
const equipmentList = ref()
const disabled = ref(true)
const inputLoading = ref(false)
//获取设备
function EquipmentList() {
  getProductByUser().then((res) => {
    deviceTypeList.value = res.data
  })
}
async function getDevice() {
  // @ts-ignore
  // props.data.companyId = parseInt(props.data.companyId)
  dataList.value = []
  for (let i = 1; i <= model.value.jt1078Avch; i++) {
    dataList.value.push({ id: i, name: '', enlbe: 1 })
  }
  // console.log(dataList.value)
  analysis(model.value.jt1078Avset)
}
const init = (id?: string) => {
  EquipmentList()
  getDevice()
}
init()
const dataRules = ref({
  imei: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
  // productId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
})

function remoteMethod(query: string) {
  if (query) {
    inputLoading.value = true
    useSearchImeiApi(query).then((res) => {
      inputLoading.value = false
      imeiList.value = res.data
    })
  } else {
    imeiList.value = []
  }
}

function imeiChange(imei) {
  getimeiInfoApi(imei).then((res) => {
    // eslint-disable-next-line vue/no-mutating-props
    emits('updateValue', { k: 'device', v: res.data.list[0] })
  })
}

//解析字符串
function analysis(str) {
  // console.log(str)
  if (!str) {
    return
  }
  const data = str.split('|')
  dataList.value = data.map((item, index) => {
    return {
      id: index++,
      name: item === '*' ? '' : item,
      enlbe: item === '*' ? 0 : 1
    }
  })
  // console.log(dataList.value)
}
//设备分组
function getDeviceGrouping() {
  getdeviceGroupingApi(model.value.companyId).then((res) => {
    equipmentList.value = res.data
    disabled.value = false
  })
}
//转换字符串
function conversion(list) {
  // console.log(list)
  if (list.length === 0) {
    return
  }
  let data = list.map((item, index) => {
    if (item.enlbe !== 1) {
      return '*'
    } else if (list[index].name) {
      return list[index].name
    } else {
      return ++index
    }
  })
  // eslint-disable-next-line vue/no-mutating-props
  model.value.jt1078Avset = data.join('|')
  // console.log(data)
  // console.log(model.value.jt1078Avset)
}
// 表单提交
const submitHandleBasic = () => {
  conversion(dataList.value)
  return dataFormRef.value.validate((valid: boolean) => {
    // console.log('Basic', valid)
    return valid
  })
}

defineExpose({
  submitHandleBasic
})
</script>
<style scoped>
span {
  display: inline-block;
  font-size: 10px;
}
.display {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: baseline;
}
.red {
  color: red;
}
.green {
  color: green;
}
</style>
